<template>
    <div class="hotPlay" style="padding-bottom:55px;">

        <!-- <ul>
            <li v-for="film in dataList" :key="film.filmId">
                <img :src="film.poster" alt="" @click="goDetail(film.filmId)">
                <h3>{{film.name}}</h3>
                <p class="actor">主演:{{film.actors | actorsfilter}}</p>

            </li>
        </ul> -->
        <van-list
            v-model="isLoading"
            @load="onload"
            :finished="isFinished"
            finished-text="没有啦！！！！"
            :immediate-check="false"
        >
            <van-cell v-for="film in $store.state.dataList" :key="film.filmId">
                <img :src="film.poster" alt="" @click="goDetail(film.filmId)">
                <h3>{{film.name}}</h3>
                <p class="actor">主演:{{film.actors | actorsfilter}}</p>
            </van-cell>
        </van-list>
        
    </div>
</template>
<script>
import http from "@/utils/http.js"
import Vue from "vue"
import { List,Cell } from "vant"
Vue.use(List).use(Cell)

Vue.filter("actorsfilter",(actors) => {
    // console.log(actors);
    if(!actors){
        return "暂时没有演职人员";
    }
    return actors.map(item => item.name).join(" ")
})
export default {
    data(){
        return {
            // dataList:[],
            isLoading:false,
            current:1,
            total:0,
            isFinished:false
        }
    },
    mounted(){

        if(this.$store.state.dataList.length === 0){
            console.log("执行了");
            
            const ps = this.$store.dispatch("getFilmData",{
                current:this.current,
                cityId:this.$store.state.cityId
            });
            ps.then(() => {
                // console.log("数据请求结束");
                
            })
        }
        // http({
        //     url:`/gateway?cityId=150300&pageNum=1&pageSize=10&type=1&k=5098835`,
        //     headers:{
        //         'X-Host': 'mall.film-ticket.film.list'
        //     }
        // }).then((res) => {
        //     console.log(res);
        //     this.dataList = res.data.data.films
        //     // 保存总条数
        //     this.total = res.data.data.total
        // })
   },
   methods:{
       goDetail(id){
           // console.log(id);
           this.$router.history.push("/detail/" + id )
       },
       onload(){
           console.log("开始加载数据");
           // 判断是否加载完毕
           console.log(this.$store.state.dataList.length , this.$store.state.filmTotal);
           
           if(this.$store.state.dataList.length === this.$store.state.filmTotal){
               this.isFinished = true; // 加载完毕的设置
               return;
           }
           // 正在加载
           this.isLoading = true
           // 从第二页开始加载
            this.current++
            this.$store.dispatch("getFilmData",{
                current:this.current,
                cityId:this.$store.state.cityId
            }).then(() => {
                this.isLoading = false;
            });
            // http({
            //     url:`/gateway?cityId=150300&pageNum=${this.current}&pageSize=10&type=1&k=5098835`,
            //     headers:{
            //         'X-Host': 'mall.film-ticket.film.list'
            //     }
            // }).then((res) => {
            //     // 把后面页数的数据追加到原来的数据中
            //     // this.dataList = [].concat(this.dataList,res.data.data.films)
            //     this.dataList = [...this.dataList,...res.data.data.films]
            //     this.isLoading = false // 当前一页数据加载完毕
            // })
       }
   }
}
</script>
<style lang="scss" scoped>
    .van-cell{
        overflow: hidden;
        padding: 10px;
        img{
            float: left;
            width: 100px;
        }
    }
    .actor{
        width: 150px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
</style>


